<template>
  <el-form
    :model="line"
    ref="dataForm"
    class="flowEditForm margin13"
    size="small"
  >
    <h3>执行条件</h3>
    <el-form-item label="条件ID">
      <el-input disabled v-model="line.id"></el-input>
    </el-form-item>
    <el-form-item label="选择字段"></el-form-item>
    <el-form-item class="checkField">
      <el-checkbox-group
        v-model="selectConditions"
        @change="handleCheckedChange"
      >
        <el-checkbox
          :label="item.fieldName"
          v-for="item in conditionList"
          :key="item.id"
          >{{ item.fieldDesc }}</el-checkbox
        >
      </el-checkbox-group>
    </el-form-item>
    <el-form-item label="执行条件">
      <el-radio-group v-model="line.condType">
        <el-radio label="0">或</el-radio>
        <el-radio label="1">且</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
            <div v-if="selectedCondition.length>0" class="textSelect">
              <p v-for="(item,index) in selectedCondition" :key="item.id" style="padding:0px;">
                 <el-tooltip class="item" effect="dark" :content="item.fieldDesc" placement="top">
     <span>{{item.fieldDesc}}</span>
    </el-tooltip>
                
                <span>
                  <el-select
                    v-model="conditionOption[index]"
                    placeholder="请选择"
                    @change="changeOption"
                    size="small"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </span>
                <span>
                  <el-input
                    type="text"
                    placeholder="请输入"
                    v-model="inputCondition[index]"
                    size="small"
                    @change="handleInput"
                  ></el-input>
                </span>
              </p>
            </div>
          </el-form-item>
    <!-- <el-form-item label="源活动">
            <el-input disabled v-model="line.sourceId"></el-input>
        </el-form-item>
        <el-form-item label="目标活动">
            <el-input disabled v-model="line.targetId"></el-input>
        </el-form-item> -->
    <!-- <el-form-item label="名称">
            <el-input v-model="line.label"></el-input>
        </el-form-item> -->
    <!-- <el-form-item label="备注说明">
            <el-input v-model="line.Remark" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
        </el-form-item> -->
  </el-form>
</template>

<script>
export default {
  name: "editLine",
  data() {
    return {
      conditionList: [
        {
          id: 1,
          fieldName: "A",
          fieldDesc: "字段一字段一"
        },
        {
          id: 2,
          fieldName: "B",
          fieldDesc: "字段二"
        },
        {
          id: 3,
          fieldName: "C",
          fieldDesc: "字段三"
        },
        {
          id: 4,
          fieldName: "D",
          fieldDesc: "字段四"
        }
      ],
       options: [
        {
          label: ">",
          value: "1"
        },
        {
          label: "<",
          value: "2"
        },
        {
          label: "=",
          value: "0"
        },
        {
          label: "<=",
          value: "3"
        },
        {
          label: ">=",
          value: "4"
        },
        {
          label: "!=",
          value: "5"
        }
      ],
      selectConditions: [],
      selectedCondition: [],
      inputCondition: [],
      conditionOption: [],
      line: { label: "" },
      isUpdate: false
    };
  },
  watch: {
    line: {
      handler(val) {
        // console.log(val);
        if (this.isUpdate) {
          this.$emit("line-save", this.line);
        }
      },
      deep: true
    }
  },
  methods: {
    init(item) {
      this.isUpdate = false;
      this.line = item;
      this.$nextTick(function() {
        this.isUpdate = true;
      });
    },
    handleCheckedChange(val) {
    //   this.currentSelect.selectConditions = val
        this.subCondition();
    },
    subCondition() {
      let arrs = [];
      let names = [];
      this.conditionOption = [];
      this.inputCondition = [];
      this.conditionList.map((item, index) => {
        this.selectConditions.forEach(i => {
          if (item.fieldName == i) {
            arrs.push(item);
          }
        });
      });
      this.conditionList.map((item, index) => {
        this.selectConditions.forEach(i => {
          if (item.fieldName == i) {
            names.push(item.fieldDesc);
          }
        });
      });
      this.selectedCondition = arrs;
      this.selectedConditionName = names;
      // console.log(this.selectedCondition)
    },
    changeOption(val) {
    //   this.newObj()
      // console.log(val)
    },
    handleInput(val){
    //    this.newObj()
    },
  }
};
</script>
<style scoped>
.flowEditForm /deep/ .el-form-item {
  margin-bottom: 5px;
}
.flowEditForm h3 {
  text-align: center;
  color: #1890ff;
  font-weight: normal;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}
.checkField /deep/ .el-checkbox {
  margin-right: 20px;
}
.textSelect p{
  padding:0;
  line-height:30px;
  margin-block-start: 0em;
    margin-block-end: 0em;
}
.textSelect /deep/ .el-select {
  width: 100px;
}
.textSelect /deep/ span:nth-child(2){
    margin-left:90px;
    width:85px;
}
.textSelect /deep/ span:nth-child(3){
    width:85px;
}
.textSelect p span:nth-child(1){
    font-size:14px;
    padding: 0 3px;
    color: #fff;
     background:#1890ff;
    border-radius:4px;
    box-sizing: border-box;
}
.textSelect /deep/ span {
    border:none;
  display: inline-block;
  text-align:center;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  height:33px !important;
  line-height:33px;
}
.textSelect .el-select /deep/ .el-input__inner {
  width: 85px;
}
.textSelect /deep/ .el-input {
  width: 85px;
  /* margin-left: 10px; */
}
.textSelect /deep/ .el-input__suffix {
  right: -20px;
}
</style>
